<template>
  <div class="carpool-container" style="height: 600px">
    <el-card style="height: 500px; position: relative">
      <div style="width: 60%; left: 20% ; right: 20%; position: absolute">
        <el-form ref="formRef" :rules="data.rules" :model="data" label-width="auto" style="max-width: 500px">
          <el-form-item label="出发地（集合地点）：">
            <el-input v-model="data.form.departure" />
          </el-form-item>

          <el-form-item label="终点（目的地）：">
            <el-input v-model="data.form.destination" placeholder=""/>
          </el-form-item>

          <el-form-item label="集合时间：">
            <div>
              <el-date-picker
                  v-model="data.form.gatherTime"
                  type="datetime"
                  placeholder="Pick a Date"
                  value-format="YYYY-MM-DD HH:mm:ss"
                  date-format="MMM DD, YYYY"
                  time-format="HH:mm"
              />
            </div>
          </el-form-item>

          <el-form-item label="出发时间：">
            <div class="block">
              <el-date-picker
                  v-model="data.form.departureTime"
                  type="datetime"
                  placeholder="Pick a Date"
                  value-format="YYYY-MM-DD HH:mm:ss"
                  date-format="MMM DD, YYYY"
                  time-format="HH:mm"
              />
            </div>
          </el-form-item>

          <el-form-item label="车最大载人数（只算乘客）：">
            <el-select
                v-model="data.form.maxSeats"
                clearable
                placeholder="Select"
                style="width: 240px"
            >
              <el-option
                  v-for="item in seats"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
              />
            </el-select>
          </el-form-item>

          <el-form-item label="与您同行的人数：">
            <el-input placeholder="记得算上自己哦" style="width: 120px"
                      v-model="data.form.beginman"
            />
          </el-form-item>
          <el-form-item label="剩余座位数：">
            <el-input placeholder="麻烦你啦" style="width: 120px"
                      v-model="data.form.seatsAvailable"
            />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="addCar" >Create</el-button>
          </el-form-item>
        </el-form>
      </div>
    </el-card>
  </div>
</template>

<script setup>
import {reactive,ref} from "vue";
import {ElCard, ElMessage,} from "element-plus";
import request from "@/utils/request.js";
import router from "@/router/index.js";

const formRef = ref ()

//用户数据
const data = reactive({
  userId:-1,
  user: JSON.parse(localStorage.getItem('car-home-user')),
  gatherTime:'',
  departure:'',
  destination:'',
  departureTime:'',
  maxSeats:-1,
  seatsAvailable:-1,
  beginman:0,
  status:1,
  form:{},
  rules: {
    userId: [
      { required: true, message:'请输入id', trigger:'blur' }
    ]
  },
})

//发布拼车方法
const addCar = () =>{
  formRef.value.validate((valid) => {
    data.form.userId = data.user.userId
    if(valid){
      //请求后端
      request.post('/Home/CarInformation/add',data.form).then(res =>{
        if(res.code === '200'){
          ElMessage.success('操作成功')
        //  router.push('/Home/CarInformation')
        }else{
          ElMessage.error(res.msg)
        }
      })
    }
  })
}

//座位选择器数据
const seats = [
  {
    value: '1',
    label: '1',
  },
  {
    value: '2',
    label: '2',
  },
  {
    value: '3',
    label: '3',
  },
  {
    value: '4',
    label: '4',
  },
  {
    value: '5',
    label: '5',
  },
  {
    value: '6',
    label: '6',
  },
]

</script>

<style scoped>
.carpool-container {
  width: 1000px;
  margin: 20px auto;
  padding: 0 20px;
}

</style>